<template>
    <div class="ui-confirm-wrapper">
        <div class="ui-confirm">
            <h4 class="ui-confirm__title">
                {{ title }}
            </h4>
            <p class="ui-confirm__content">
                {{ content }}
            </p>
            <div class="ui-confirm__action">
                <UiButton
                    :label="closeButton"
                    type="tertiary"
                    @click="cancel"
                />
                <UiButton
                    :label="confirmButton"
                    @click="confirm"
                />
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'UiConfirm',

  components: {
    UiButton: () => import(/* webpackChunkName: "UiButton" */ './ui-button.vue')
  },

  props: {
    title: {
      type: String,
      default: '提示'
    },
    content: {
      type: String,
      required: true
    },
    closeButton: {
      type: String,
      default: '取消'
    },
    confirmButton: {
      type: String,
      default: '确认'
    }
  },

  methods: {
    cancel () {
      this.$emit('cancel')
      this.close()
    },

    confirm () {
      this.$emit('confirm')
      this.$nextTick(() => {
        this.close()
      })
    },

    close () {
      this.$el.addEventListener('animationend', () => {
        this.$el.remove()
        this.$destroy()
      })
      this.$el.classList.add('fade-out')
    }
  }
}
</script>

<style>
.ui-confirm-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    animation: fade-in 0.1s ease-out;
}

.ui-confirm-wrapper.fade-out {
    animation: fade-out 0.1s ease-in forwards;
}

.ui-confirm {
    position: absolute;
    top: 50%;
    left: calc(50% - 9.6875rem);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    width: 19.375rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background-color: #fff;
}

.ui-confirm__title {
    margin: 0 0 1em;
    line-height: 1.25;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}

.ui-confirm__content {
    margin: 0;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.875rem;
    line-height: 1.5714;
}

.ui-confirm__action {
    display: flex;
    margin-top: 1.75rem;
}

.ui-confirm__action > .ui-button {
    flex: auto;
}

.ui-confirm__action > .ui-button:first-child {
    margin-right: 0.5em;
}
</style>
